<template>
    <div style="padding: 5px;">
      <el-card>
        <el-form label-width="50px" :inline="true">
          <el-form-item label="日期">
            <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="form.name" style="width: 200px" :suffix-icon="Search"></el-input>
          </el-form-item>

          <el-form-item label="地址">
            <el-input v-model="form.name" style="width: 200px">
              <template #suffix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">搜索</el-button>
          </el-form-item>
        </el-form>

        <div style="padding-bottom: 10px">
          <el-button type="primary" plain>
            <el-icon :size="12" style="margin-right: 2px"><Plus /></el-icon>新增
          </el-button>
          <el-button type="danger" plain>
            <el-icon :size="12" style="margin-right: 2px"><Delete /></el-icon>批量删除
          </el-button>
          <el-button type="info" plain>
            <el-icon :size="12" style="margin-right: 2px"><Top /></el-icon>导入
          </el-button>
          <el-button type="warning" plain>
            <el-icon :size="12" style="margin-right: 2px"><Bottom /></el-icon>导出
          </el-button>
        </div>

        <el-table
            v-loading="loading"
            size="medium"
            border
            stripe
            :data="tableData"
            style="width: 100%"
        >
          <el-table-column prop="username" label="用户名" width="180" />
          <el-table-column prop="nickName" label="昵称" width="180" />
          <el-table-column prop="age" label="年龄" width="180" />
          <el-table-column prop="sex" label="性别" width="180" />
          <el-table-column label="头像" width="180">
            <template #default="scope">
              <el-image :src="scope.row.avatar" style="width: 100px"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="账户余额" width="180" />
          <el-table-column prop="address" label="地址" />
        </el-table>

        <div style="padding: 10px 0">
          <el-pagination
              background
              v-model:currentPage="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    
</template>

<script setup>
    import { Edit, Plus, Delete, Top, Bottom, Search } from '@element-plus/icons'
    import HelloWorld from '../components/HelloWorld.vue'
    import {getCurrentInstance, onMounted, onUpdated, ref} from 'vue'

    const { proxy } = getCurrentInstance();

    const a = ref(0)
    const tableData = ref([])
    const form = ref({})
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(100)
    const date = ref([])
    const loading = ref(true)

    onMounted(() => {
      console.log("mounted")
    })

    const handle = () => {
      a.value ++
    }
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const load = () => {
      proxy.$http.get("/user", {
        params: {
          pageNum: currentPage.value,
          pageSize: pageSize.value
        }
      }).then(res => {
        tableData.value = res.data.records
        loading.value = false
      })
    }
    // 加载数据
    load()
</script>